<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
#wrap{
	width: 500px;
	height: 300px;
	border:1px solid #ccc;
	margin:0 auto;
}
form{
	margin-left: 130px;
	margin-top: 30px;
}
.btn{
	margin-left: 100px;
}
h1{
	display: none;
	text-align: center;
}
h2{
	display: none;
	text-align: center;
}

	</style>
</head>
<body>
<div id="wrap">
	<form action="http://127.0.0.1:8888" method="GET">
		用户:<input type="text" name="username" class="name"><br/>
		密码:<input type="password" name="password" class="pass"><br/>
		<input type="submit" value="登录" class="btn">
	</form>
	<h1>恭喜你您,登录成功</h1>
	<h2>对不起,登录失败</h2>
</div>
</body>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
	$(".btn").on("click",function(){
		if($(".name").html("admin").$(".pass").html("123456")){
			$("h1").css("display","block");
			$("form").css("display","none");
		}else{
			$("h2").css("display","block");
			$("form").css("display","none");
		}

	})
	$(".btn").on('click',function(){
		if ($(".name").html("").$(".pass").html("")) {
			alert("登录名和密码不能为空");
		};
	})




</script>
</html>